import React,{Component} from 'react';
import {connect} from 'react-redux'
import mapDispatchToProps from '../actions/mapDispatchToProps'
import mapStateToProps from '../value/mapStateToProps'

 class  QueryParams extends Component{
 nameChange(){      
       if ($('#inputEmail').val() == '') {
        $('.span1').addClass('alert-warning').text('请输入内容')     
    }
    else {
        if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test($('#inputEmail').val()) == false) {
            $('.span1').addClass('alert-warning').text("邮箱格式不正确，请重新填写");         
        }
        else {

            $('.span1').addClass('alert-success').text("邮箱格式正确");
        }
    }
}
passChange(){
    if ($('#inputPassword').val() == '') {
        $('.span2').addClass('alert-warning').text('请输入6位数字密码')     
    }
    else {
        if (/^\d{6}$/.test($('#inputPassword').val()) == false) {
            $('.span2').addClass('alert-warning').text("密码格式不正确，请重新填写");         
        }
        else {
            $('.span2').addClass('alert-success').text("密码格式正确");
        }
    }
}
subform=()=>{
    this.props.sendUserMassage({
        email:$('#inputEmail').val(),
        password:$('#inputPassword').val()
    })
}
render(){
    if( this.props.loginState){
        var content=(
                <p>欢迎{this.props.name}</p>
        ) 
    } else{
        var content=(
            <div>
            <div className="row">
                <div className="col-md-4"></div>
                <h3 className="col-md-6">登录时请正确输入。。。</h3>
            </div>
            <div className="row">
                <div className="col-md-4">
                </div>
                <div className="container col-md-4">
                    <form className="form-signin" >                   
                        <label htmlFor="inputEmail" ><span  className=" span1">输入正确的邮箱格式</span></label>
                        <input type="email" id="inputEmail" name="email" onBlur={this.nameChange} className="form-control" placeholder="Email address"/>
                        
                        <label htmlFor="inputPassword" ><span  className=" span2">输入密码格式：6位数字</span></label>
                        <input type="password" id="inputPassword" name="password" onBlur={this.passChange} className="form-control" placeholder="Password" required/>
                        <span></span>
                        <div className="checkbox">
                        <label>
                            <input type="checkbox" value="remember-me"/> 记住我
                        </label>
                        </div>
                        <button className="btn btn-lg btn-primary btn-block" type="button" onClick={this.subform}>确认登录</button>
                    </form>
                </div>
            </div>
            </div>
    ) 
    }   
    return (			
        <div>
            {content}        	
        </div>

		)
	}
}
export default connect(mapStateToProps,mapDispatchToProps)(QueryParams)
